import React from 'react';
import {Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckIcon} from "@gluestack-ui/themed";
import {styled} from "@gluestack-style/react";
import {CheckboxProps} from "./type";

const KCheckbox = (props: CheckboxProps) => {
    const {
        children,
        icon = CheckIcon,
        iconSize = "$4",
        ...attrs
    } = props;
    return (
        <Checkbox {...attrs}>
            <CheckboxIndicator
                borderRadius="$xl"
                w={iconSize}
                h={iconSize}
            >
                <CheckboxIcon as={icon}/>
            </CheckboxIndicator>

            {children && <CheckboxLabel>{children}</CheckboxLabel>}

        </Checkbox>
    );
};

export default styled(KCheckbox);